<template>
	<view>
		<view class="all-header">
			<view :style="{height:statusBarHeight}" class="bg"></view>
			<view class="h-44p flex justify-center items-center bg" @click="type?type=0:type=1">
				<text class="text-17">{{type?'收入':'支出'}}</text><text class="iconfont icon-arrow-down ml-4"></text>
		
			</view>
		<!-- 	<view class="text-center bg flex items-center justify-center p-10">
				<text class="text-18">记账</text>
			</view> -->
		</view>
		<view class="flex justify-around tabTitle p-24">
			<text :class="{active:current==0}" @click="current=0">周</text>
			<text :class="{active:current==1}" style="border-left: none;border-right: none;" @click="current=1">月</text>
			<text :class="{active:current==2}" @click="current=2">年</text>
		</view>
		<view class="flex flex-column px-20 pt-20 pb-10 bg-white">
			<text class="mb-6 text-666">总{{type?'收入':'支出'}}:&nbsp;&nbsp;{{getTotal}}元</text>
			<text class="text-14 text-666">{{current==0||current==1?'日':'月'}}平均值:&nbsp;&nbsp;{{(getTotal / (current==0?7:current==1?daysInMon:12)).toFixed(2)}}元</text>
		</view>
		<view class="charts-box bg-white">
			<qiun-data-charts  type="line"
			  :opts="opts"
			  :chartData="chartData"
			   :ontouch="true"/>
		</view>
		<!-- 支出/收入排行榜 -->
		<view class="flex flex-column p-20 bg-white">
			<text class="mb-10">{{type?'收入':'支出'}}排行榜</text>
			<template v-if="list.length>0">
				<view v-for="(item,index) in list" class="flex items-center" style="border-bottom: 2px dashed #eee;">
					<text class="iconfont bg p-16r mr-20r" :class="item.icon"  style="font-size: 30px; border-radius:50%;"></text>
					<view class="flex-auto flex flex-column py-20">
						<view class="flex">
							<text>{{item.title}}&nbsp;&nbsp;<text class="text-14 text-666">{{item.rate}}</text></text>
							
						</view>
						<view style="background-color: #eee;" class="rounded-3">
							<view class="bg h-6p rounded-3" :style="{width:item.rate}"></view>
						</view>
					</view>
					<view class="flex items-center">
						<view class="flex flex-column items-end ml-10">
							<text class="text-333 mb-6">￥{{formatMoney(item.num)}}</text>
							<text class="text-666 text-12">{{item.count}}笔</text>
						</view>
						<text class="iconfont icon-arrow-right ml-6 text-333"></text>
					</view>
				</view>
			</template>
			<view v-else class="empty flex-auto flex flex-column justify-center items-center">
				<text class="iconfont icon-wushuju"></text>
				<text>暂无数据</text>
			</view>
			
		</view>
		<text @click="go">go demo</text>
	</view>
</template>

<script>
	import {getRank,getLine} from '@/api/api.js';
	import {formatMoney} from '@/common/format.js'
	import {getWeekOrder,getWeekXAxis,getDaysInMon} from '@/common/statistic.js'
	export default {
		data() {
			return {
				type:0,
				weekOrder:null,
				curMon:null,
				curDate:null,
				curDay:null,
				current: 0,
				list:[],
				chartData: {},
				  //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#666"],
					padding: [15,10,10,10],
					enableScroll: true,
					legend:{
						show:false
					},
					xAxis: {
					  disableGrid: true,
					  scrollShow: true,
					  itemCount: 7,
					  scrollShow:true,
					  scrollColor:'#ffd700',
					  scrollAlign:this.current==2?this.curMon<=6?'left':'right':'left'
					},
					yAxis:{
					  gridType: "dash",
					  dashLength: 10
					},
				}
			}
		},
		computed: {
			weekOrderParam() {
				return this.weekOrder.toString().padStart(2,'0')
			},
			getTotal() {
				let sum = 0
				if(!this.chartData.series) {
					return sum
				}
				for (let num of this.chartData.series[0]?.data) {
					sum += num
				}
				return sum
			},
			statusBarHeight() {
				return (uni.getSystemInfoSync()).statusBarHeight +'px'
			},
			daysInMon() {
				return getDaysInMon()
			}
		},
		watch: {
			type() {
				this.getData()
			},
			current() {
				this.getData()
			}
		},
		onLoad() {
			const date = new Date()
			this.curMon = (date.getMonth()+1).toString().padStart(2,'0')
			this.curDate =this.curMon +'-'+date.getDate().toString().padStart(2,'0');
			this.curDay = date.getDay()
			this.weekOrder = getWeekOrder()
		},
		async onShow() {
			// this.list  = await getRank(0)
			await this.getData()
			// console.log(this.list)
		},
		methods: {
			formatMoney(num) {
					return formatMoney(num)
			},
			async getData() {
				// 获取周折线图
				await this.getLineChart()
				// 获取金额排行列表
				await this.getRankList()
			},
			async getLineChart() {
				let dateValue = ''
				switch (this.current){
					case 0:
					dateValue = this.weekOrderParam
						break;
					case 1:
						dateValue = this.curMon
						break;
				}
				const list = await getLine(this.type,this.current,dateValue)
				// console.log(JSON.stringify(list))
				const date = new Date()
				// const week = getWeekXAxis(date)
				const data = [],month = [],mon_date=[],
						week = ['1','2','3','4','5','6','7'],
						weekTxt = ['一','二','三','四','五','六','日']
				for(let i=1;i<=12;i++) {
					month.push(i.toString().padStart(2,'0'))
				}
				for(let i=1;i<=getDaysInMon();i++) {
					mon_date.push(this.curMon+'-'+i.toString().padStart(2,'0'))
				}
				let categories = [];
				
				if(this.current==0) {
					for (let index of week) {
						data.push((list.filter(item => item.week == index))[0]?.num ?? 0)
					}
					categories = week.map((val,index) => val==this.curDay ? '今天' :'周'+ weekTxt[index])
					this.opts.xAxis.scrollShow = false
				}
				if(this.current==1) {
					for (let date of mon_date) {
						data.push((list.filter(item => item.date == date))[0]?.num ?? 0)
					}
					categories = mon_date.map((val) => val==this.curDate ? '今天 ' :val)
				}
				if(this.current==2) {
					for (let mon of month) {
						data.push((list.filter(item => item.mon == mon))[0]?.num ?? 0)
					}
					categories = month.map((val) => val==this.curMon ? '本月 ' :val+'月 ')
					// this.opts.xAxis.scrollShow = true
					// this.opts.xAxis.itemCount = 6
				}
				// console.log(data)
				let res = {
					categories,
					series: [
					  {
						name: "金额",
						data
					  },
					]
				  };
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			async getRankList() {
				const rankList = await getRank(this.type);
				let sum = 0
				for (let item of rankList) {
					sum+= item.num
				}
				this.list = rankList.map(item => {
					item.rate = (item.num / sum * 100).toFixed(2)+'%'
					return item
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
		.active {
			color: white;
			background-color: #000;
		}
		.tabTitle {
			background-color: gold;
			text {
				flex-basis: 50%;
				text-align: center;
				padding: 12rpx 0;
				border: 1px solid #000;
			}
		}
	.charts-box {
		width: 100%;
		height: 350rpx;
		margin-bottom: 20px;
	}	
	.empty {
		color: #ccc;
		.iconfont {
			font-size: 60px;
			margin-bottom: 10px;
		}
	}
</style>

